<template>
  <el-dialog
    v-model="dialogVisible"
    title="选择客户"
    width="30%"
    :before-close="handleClose"
  >
    <div class="class-dialog">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="客户" prop="customer" style="width: 100%">
          <el-select
            style="width: 100%"
            placeholder="选择客户"
            v-model="ruleForm.customer"
            filterable
            clearable
            value-key="id"
          >
            <el-option
              v-for="ele in customerOptions"
              :key="ele.id"
              :label="ele.name"
              :value="ele"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
// 客户api
import { customerOptionsApi } from "@/plugins/api/shopping/user";

let ruleForm = ref({});
let rules = {
  customer: [{ required: true, message: "请选择客户", trigger: "change" }],
};
let dialogVisible = ref(false);
function handleClose(done) {
  // dialogVisible.value = false;
  ElMessageBox.confirm("是否确定关闭此对话框?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
}

let ruleFormRef = ref(null);
function initFun(row, type) {
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields();
  }
  ruleForm.value = {};
  // getCustem();
  dialogVisible.value = true;
}

const emit = defineEmits(["selectCustomer"]);
function submit() {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      emit("selectCustomer", ruleForm.value.customer);
      dialogVisible.value = false;
    }
  });
}
//
let customerOptions = ref([]);
function getCustem() {
  customerOptionsApi().then((data) => {
    customerOptions.value = data;
  });
}
//
onMounted(() => {
  getCustem();
});
defineExpose({
  initFun,
});
</script>
<style scoped lang="scss"></style>
